<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

</head>

<body class="yui-skin-sam">
<h1>Server-side Sorting</h1>
<div id="serversorting"></div>

<script type="text/javascript">
// Global init var to run Loader only once
var gRunInit = true;
var gRunDataTable = true;
YAHOO_config = {
    load: {
        require: ['yahoo'],
        base: '../../build/',
        onLoadComplete: function(loader) {
            if(gRunInit) {
                gRunInit = false;

                YAHOO.example.checkJson = function(name, loaderCallback) {
                    if (Object.prototype.toJSONString) {
                        loaderCallback();
                    } else {
                        setTimeout(function() {
                                YAHOO.example.checkJson(name, loaderCallback);
                            }, 3);
                    }
                };

                loader.addModule({
                    name: "json",
                    type: "js",
                    fullpath: "assets/js/json.js",
                    verifier: YAHOO.example.checkJson
                });

                loader.require("fonts", "json", "connection", "datatable");

                loader.onLoadComplete = function(loader) {
                    if(gRunDataTable) {
                        gRunDataTable = false;

                        YAHOO.example.ServerSorting = new function() {
                            // Column definitions
                            var myColumnDefs = [
                                {key:"id", label:"ID", sortable:true},
                                {key:"name", label:"Name", sortable:true},
                                {key:"date", label:"Date", sortable:true},
                                {key:"price", label:"Price", sortable:true},
                                {key:"number", label:"Number", sortable:true},
                                {key:"address", label:"Address", sortable:true},
                                {key:"company", label:"Company", sortable:true},
                                {key:"desc", label:"Description", sortable:true},
                                {key:"age", label:"Age", sortable:true},
                                {key:"title", label:"Title", sortable:true},
                                {key:"phone", label:"Phone", sortable:true},
                                {key:"email", label:"Email", sortable:true},
                                {key:"zip", label:"Zip", sortable:true},
                                {key:"country", label:"Country", sortable:true}
                            ];

                            // DataSource instance
                            this.myDataSource = new YAHOO.util.DataSource("assets/php/json_proxy.php?");
                            this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
                            this.myDataSource.responseSchema = {
                                resultsList: "records",
                                fields: ["id","name","date","price","number","address","company","desc","age","title","phone","email","zip","country"]
                            };

                            // DataTable instance
                            var oConfigs = {
                                initialRequest: "sort=id&dir=asc&results=100", // Server parameters
                                sortedBy:{key:"id", dir:"asc"} // Set up initial column headers
                            };
                            this.myDataTable = new YAHOO.widget.DataTable("serversorting", myColumnDefs,
                                    this.myDataSource, oConfigs);

                            // Custom code to parse the raw server data for sortedby values
                            this.myDataSource.doBeforeCallback = function(oRequest, oRawResponse, oParsedResponse) {
                                var oSelf = YAHOO.example.ServerSorting;
                                var oDataTable = oSelf.myDataTable;

                                // Get sortedby values
                                var oRawResponse = oRawResponse.parseJSON(); //JSON.parse(oRawResponse); // Parse the JSON data
                                var sortCol = oRawResponse.sort; // Which column is sorted
                                var sortDir = oRawResponse.dir; // Which sort direction

                                // Update the config sortedBy with new values
                                var newSortedBy = {
                                    key: sortCol,
                                    dir: sortDir
                                }
                                oDataTable.set("sortedBy", newSortedBy);

                                // Let the DataSource parse the rest of the response
                                return oParsedResponse;
                            };

                            // Override function for custom sorting
                            this.myDataTable.sortColumn = function(oColumn) {
                                // Which direction
                                var sDir = "asc";
                                // Already sorted?
                                if(oColumn.key === this.get("sortedBy").key) {
                                    sDir = (this.get("sortedBy").dir === "asc") ?
                                            "desc" : "asc";
                                }

                                var newRequest = "sort=" + oColumn.key + "&dir=" + sDir + "&results=100&startIndex=0";
                                this.getDataSource().sendRequest(newRequest, this.onDataReturnInitializeTable, this);
                            };
                        };
                    }
                }
                loader.insert();
            }
        }
    }
};
</script>
<script type="text/javascript" src="../../build/yuiloader/yuiloader-beta.js"></script>
</body>
</html>
